<template>
  <div class="_wz_cent_main _wz_trafficState">
    <div style="width: 100%;height: 100%;position: relative;">
      <div id="_wz_trafficState" style="width: 100%;height: 100%;">
      </div>
      <div style="position: absolute;width: 100%;bottom: 0px;left: 0px;background: rgba(0,0,0,0.8);padding: 10px;box-sizing:border-box;">
        <div style="float: right;color: #fff;max-width: calc(100% - 210px);min-width:200px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;">
          <div>
            <div style="display: inline-block;">
              <label style="width: 90px;float: left;display: block;font-weight: 400;line-height: 20px;text-align: right;padding: 9px 15px;">开始时间</label>
              <div style="float: left;padding: 9px 5px; line-height: 20px;min-height: 20px;">
                {{ !!addressTime.wzKssj ? addressTime.wzKssj : '--' }}
              </div>
            </div>
            <div style="display: inline-block;">
              <label style="width: 90px;float: left;display: block;font-weight: 400;line-height: 20px;text-align: right;padding: 9px 15px;">开始地点</label>
              <div style="float: left;padding: 9px 5px; line-height: 20px;min-height: 20px;">
                {{ !!addressTime.wzKsdd ? addressTime.wzKsdd : '--' }}
              </div>
            </div>
          </div>
          <div>
            <div style="display: inline-block;">
              <label style="width: 90px;float: left;display: block;font-weight: 400;line-height: 20px;text-align: right;padding: 9px 15px;">结束时间</label>
              <div style="float: left;padding: 9px 5px; line-height: 20px;min-height: 20px;">
                {{ !!addressTime.wzJssj ? addressTime.wzJssj : '--' }}
              </div>
            </div>
            <div style="display: inline-block;">
              <label style="width: 90px;float: left;display: block;font-weight: 400;line-height: 20px;text-align: right;padding: 9px 15px;">结束地点</label>
              <div style="float: left;padding: 9px 5px; line-height: 20px;min-height: 20px;">
                {{ !!addressTime.wzJsdd ? addressTime.wzJsdd : '--' }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>
<script>


export default {
  props: ['vehicleData'],//接收来自父组件的数据
  data() {
    return {
      trajectoryList:[],
      addressTime:{
        wzKssj: null,
        wzKsdd: null,
        wzJssj: null,
        wzJsdd: null
      },
      map:null,
      bmap:null,
    }
  },
  computed: {//计算属性

  },
  beforeCreate() {//beforeCreate创建前状态

  },
  created() {//created创建完毕状态

  },
  beforeMount() {//beforeMount挂载前状态   DOM 元素然后塞入页面的过程

  },
  mounted() {//mounted 挂载结束状态


    var that = this;

        that.mapLoad()
        var data = {
          carPlateNo: that.vehicleData.carPlateNo,
          startTime: that.public.timeFormatting(new Date(new Date().getTime() - 60*60*1000), "yyyy-MM-dd hh:mm:ss"),
          endTime: that.public.timeFormatting(new Date(), "yyyy-MM-dd hh:mm:ss"),
        }

        that.axios.post(that.apiUrl.positionTrajectory, data).then(res => {
          if (!!res) {
            if(res.data.data.length > 0){
              that.trajectoryList = res.data.data;
              that.trajectory()
            }else{
              that.$Message.error('暂未获得到该车辆的轨迹');
            }
          }
        }).catch(err => {
          console.log('失败', err);
        })




  },
  methods: {//执行的方法
    mapLoad(){
      var that = this;
      // that.bmap = new BMapGL.Map("_wz_trafficState");    // 创建Map实例
      // that.bmap.centerAndZoom(new BMapGL.Point(116.297611, 40.047363), 17);  // 初始化地图,设置中心点坐标和地图级别
      // that.bmap.enableScrollWheelZoom(true);     // 开启鼠标滚轮缩放
      that.map = new BMap.Map('_wz_trafficState');
      that.map.enableScrollWheelZoom();
      that.map.centerAndZoom(new BMap.Point(116.404, 39.915), 13);
    },
    trajectory(){
      var that = this;
      // var arrPois = [];
      // that.trajectoryList.forEach(function (k, i) {
      //   if (i == 0) {//起点
      //     that.bmap.centerAndZoom(new BMapGL.Point(k.lonX, k.latY), 16);
      //     let myIcon = new BMapGL.Icon("../../static/img/vehicleImg/start.png", new BMapGL.Size(28, 32));
      //     var marker = new BMapGL.Marker(new BMapGL.Point(k.lonX, k.latY), {icon: myIcon});  // 创建标注
      //     marker.setZIndex(999999);
      //     that.bmap.addOverlay(marker);            //增加点
      //   } else if ((i + 1) == that.trajectoryList.length) {//终点
      //     let myIcon = new BMapGL.Icon("../../static/img/vehicleImg/End.png", new BMapGL.Size(28, 32));
      //     var marker = new BMapGL.Marker(new BMapGL.Point(k.lonX, k.latY), {icon: myIcon});  // 创建标注
      //     marker.setZIndex(999999);
      //     that.bmap.addOverlay(marker);            //增加点
      //   }
      //   arrPois.push(new BMapGL.Point(k.lonX, k.latY))
      // })
      // let polyline = new BMapGL.Polyline(arrPois, {
      //   strokeWeight: '6',//折线的宽度，以像素为单位
      //   strokeOpacity: 0.8,//折线的透明度，取值范围0 - 1
      //   strokeColor: "#18a45b" //折线颜色
      // });   //
      // var trackAni = new BMapGLLib.TrackAnimation(that.bmap, polyline, {
      //   overallView: true,
      //   tilt: 30,
      //   duration: 20000,
      //   delay: 300
      // });
      // trackAni.start();
      var lushu;
      var arrPois = [];
      that.trajectoryList.forEach(function (k, i) {
        if (i == 0) {//起点
          that.map.centerAndZoom(new BMap.Point(k.lonX, k.latY), 16);
          let myIcon = new BMap.Icon("../../static/img/vehicleImg/start.png", new BMap.Size(28, 32));
          var marker = new BMap.Marker(new BMap.Point(k.lonX, k.latY), {icon: myIcon});  // 创建标注
          marker.setZIndex(999999);
          that.map.addOverlay(marker);            //增加点

          var geoc = new BMap.Geocoder();
          geoc.getLocation(new BMap.Point(k.lonX, k.latY), function (rs) {
            that.addressTime.wzKssj = k.dateTime;
            that.addressTime.wzKsdd = rs.address;
          })
        } else if ((i + 1) == that.trajectoryList.length) {//终点
          let myIcon = new BMap.Icon("../../static/img/vehicleImg/End.png", new BMap.Size(28, 32));
          var marker = new BMap.Marker(new BMap.Point(k.lonX, k.latY), {icon: myIcon});  // 创建标注
          marker.setZIndex(999999);
          that.map.addOverlay(marker);            //增加点

          var geoc = new BMap.Geocoder();
          geoc.getLocation(new BMap.Point(k.lonX, k.latY), function (rs) {
            that.addressTime.wzJssj = k.dateTime;
            that.addressTime.wzJsdd = rs.address;
          })
        }

        arrPois.push(new BMap.Point(k.lonX, k.latY))
      })
      let polyline = new BMap.Polyline(arrPois, {
        strokeWeight: '6',//折线的宽度，以像素为单位
        strokeOpacity: 0.8,//折线的透明度，取值范围0 - 1
        strokeColor: "#18a45b" //折线颜色
      });   //
      that.map.addOverlay(polyline);
      // let myIcon = new BMap.Icon("../../static/img/vehicleImg/b4.png", new BMap.Size(22, 22));
      lushu = new BMapLib.LuShu(that.map,arrPois,{
        defaultContent:"",//"从天安门到百度大厦"
        autoView:true,//是否开启自动视野调整，如果开启那么路书在运动过程中会根据视野自动调整
        icon  : new BMap.Icon('../../static/img/vehicleImg/b41.png', new BMap.Size(22, 22)),
        speed: 800,
        enableRotation:true,//是否设置marker随着道路的走向进行旋转
        landmarkPois: []
      });
      // that.map.setViewport(arrPois);
      lushu.start();
    },

  },
  watch: {//监听

  },
  beforeUpdate() {//beforeUpdate 更新前状态

  },
  updated() {//updated 更新完成状态

  },
  beforeDestroy() {//beforeDestroy 销毁前状态

  },
  destroyed() {//destroyed 销毁完成状态

  }
}
</script>
<style lang="less">
  ._wz_trafficState{
    width: 100%;
    height: 100%;
  }
</style>
